<!--
    组件说明：可用于头部包含两个下拉单还有三个按钮, 只适用于特定场景不建议导入其他位置使用
    需要传入的数据：
        根据种类和日期搜索的参数-searchParameter_type_date: Object,
        数据举例：
            searchParameter_type_date: {
                page: 1,
                size: 5,
                nums: null,
                type: null
            },
    emit 的方法：
        tableDataChange 传递新的表格数据和数据的总数给父组件
        refreshTable 让父组件刷新表格数据
    疑惑之处可联系QQ : 1219951647
-->
<template>
    <div slot="header" class="clearfix header_style flex_center">

        <!-- drow-down list begin -->
        <div class="left">

            <!-- first begin -->
            <el-dropdown 
            size="medium" 
            split-button type="primary" 
            @command="handleType"
            >
            证书类型
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item  
                    v-for="(item,index) in certificateType" 
                    :key="index"
                    :command="item"
                    >
                    {{item}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- first end -->
            
            <!-- second begin -->
            <el-dropdown 
            size="medium" 
            split-button type="primary" 
            @command="handleDate"
            >
            到期时间
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item 
                    v-for="item in deadline" 
                    :key="item.nums"
                    :command="item.nums"
                    >
                    {{item.value}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- second end -->
        </div>
        <!-- drow-down list end -->
        
        <!-- button begin -->
        <div class="right flex_center">
            <el-tooltip 
            class="item cancelLeft" 
            effect="dark" 
            content="刷新按钮" 
            placement="top-start">
                <el-button 
                @click="refreshTable"
                icon="el-icon-refresh" 
                class="el-button--small refresh_button"
                >
                </el-button>
            </el-tooltip>
            <el-tooltip 
            class="item cancelLeft" 
            effect="dark" 
            content="批量删除" 
            placement="top-start">
                <el-button 
                icon="el-icon-delete" 
                class="el-button--small delete_button"
                @click="deleteSelected"
                v-auth="'breed_warn_delete'"
                >
                </el-button>
            </el-tooltip>
            <el-popover
            placement="bottom-end"
            width="150"
            trigger="hover"
            >
                <el-checkbox-group v-model="checkList">
                    <el-checkbox 
                    :label="item" 
                    v-for="(item,index) in cosList" 
                    :key="item"
                    @change="cosChange($event,index)"
                    >
                    </el-checkbox>
                </el-checkbox-group>
                <el-button 
                icon="el-icon-s-operation" 
                class="el-button--small"
                slot="reference"
                >
                </el-button>
            </el-popover>
        </div>
        <!-- button end -->
    </div>
</template>

<script>
// API
import { 
    searchByDateAndType,
    deleSomeCertificate
} from "../../../../Api/productionmanage/warning/supplierWarning"

export default {
    name: 'Header',

    props: {
        searchParameter_type_date: Object,
    },

    data() {
        return {
            checkList: [ "证书图片", "证书名称", "供应商名称", "到期时间" ],

            cosList: [ "证书图片", "证书名称", "供应商名称", "联系人", "联系电话", "到期时间" ],

            deadline: [
                {
                  value: "全部",
                  nums: null
                },
                {
                  value: "已过期",
                  nums: 0
                },
                {
                  value: "一个月",
                  nums: 1
                },
                {
                  value: "两个月",
                  nums: 2
                },
                {
                  value: "三个月",
                  nums: 3
                },
            ],

            certificateType: [
                "全部",
                "产品许可证",
                "食品经营许可证",
                "企业生产许可证",
                "食品流通许可证",
                "餐饮服务许可证"
            ]
        }
    },

    watch: {
        "searchParameter_type_date.page": {
            handler() {
                this.search_type_date(this.searchParameter_type_date)
            }
        },

        "searchParameter_type_date.size": {
            handler() {
                this.search_type_date(this.searchParameter_type_date)
            }
        }
    },

    methods: {
        // 删除选中行
        deleteSelected() {
            this.$confirm('此操作将永久删除所选中数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then( () => {
                deleSomeCertificate( this.$store.state.supplierWarnData.deleteId ).then( res => {
                    if( res.data.flag == true ) {
                        console.log('删除成功',res);
                        this.refreshTable()
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                    }
                 } )
            })
            .catch( () => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
            });
        },

        // 刷新表格
        refreshTable() {
            this.$emit("refreshTable")
        },

        // 列筛选
        cosChange( data, index ) {
            if( !index ) {
                this.$store.commit( 'supplierWarnData/isShowPic' )
            }
            else {
                this.$store.commit( 'supplierWarnData/isShowCos', index-1 )
            }
        },

        // 种类变化
        handleType( command ) {
            if( command == "全部" ) {
                this.searchParameter_type_date.type = null
                this.search_type_date(this.searchParameter_type_date)
            }
            else {
                this.searchParameter_type_date.type = command
                this.search_type_date(this.searchParameter_type_date)
            }
        },

        // 日期变化
        handleDate( command ) {
            this.searchParameter_type_date.nums = command
            this.search_type_date(this.searchParameter_type_date)
        },

        // 根据证书种类和到期时间搜索
        search_type_date( searchParameter_type_date ) {
            if( this.$store.state.supplierWarnData.searchWay !== 2 )
                this.$store.commit('supplierWarnData/changeSearchWay',2)

            searchByDateAndType(searchParameter_type_date).then( res => {
                if( res.data.flag ) {
                    const sum = res.data.data.total
                    const { records:data } = res.data.data

                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    
                    this.$emit( "tableDataChange", data, sum )
                }
                else {
                    this.$message({
                        message: "暂无数据",
                        type: 'error'
                    });

                    this.$emit( "tableDataChange", null, 0 )
                }
            } )
        }
    }
}
</script>

<style scoped lang="scss">
// 公共样式
.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 头部样式
.header_style {
    justify-content: space-between;
    .left {
        justify-content: flex-end;
    }
    .right flex_center {
        justify-content: flex-end;
    }
}

.button_style {
    margin-right: 10px;
}

.cancelLeft {
    margin-left: 0;
}

.refresh_button:hover,.refresh_button:focus {
    color: #FFF;
    border-color: #67c23a;
    background-color: #67c23a;
}

.delete_button:hover,.delete_button:focus {
    color: #FFF;
    border-color: #F56C6C;
    background-color: #F56C6C;
}
</style>